<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>数据代理演示</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <!--数据代理：通过一个对象，代理对另一个对象中属性的操作-->
    <!--注意，Java中代理关注点为具体的业务执行，前端的代理是指数据的传递-->
    <script type="text/javascript">
      let obj = { x: 100 };
      let obj2 = { y: 200 };

      Object.defineProperty(obj2, "x", {
        //可理解为Java中的对象间赋值，通过obj2操作obj的x属性
        get() {
          return obj.x;
        },
        set(value) {
          obj.x = value;
        },
      });
    </script>
  </body>
</html>
